<template>
    <div>
        <el-breadcrumb separator="/" class="m-b-20">
            <el-breadcrumb-item><a href="/">后台首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>

        <router-link to="/addArticle">
            <el-button type="primary">添加文章</el-button>
        </router-link>

        <el-table :data="tableData" class="m-t-10">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="title" label="文章标题" width="500"></el-table-column>
            <el-table-column prop="author" label="文章作者" width="100"></el-table-column>
            <el-table-column prop="time" :formatter="dateFormat" label="发布时间" width="200"></el-table-column>
            <el-table-column label="操作" min-width="200">
                <template #default="v">
                    <el-button size="mini" type="warning" @click="handleEdit(v.$index, v.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(v.$index, v.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" :current-page="current"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>
    import {
        get,
        del
    } from "@/network/request"
    import moment from 'moment'
    export default {
        name: 'Article',
        data() {
            return {
                tableData: [],
                total: 0,
                current: 1
            }
        },
        mounted() {
            this.$nextTick(() => {
                get('/articleList', {
                    page: this.current
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            })
        },
        methods: {
            dateFormat(row, column, time) {
                return moment.unix(time).format("YYYY-MM-DD HH:mm:ss")
            },
            changePage(page) {
                get('/articleList', {
                    page
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            },
            handleEdit(index, row) {
                this.$router.push('/editArticle/' + row.id)
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除，是否继续？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del('/deleteArticle', {
                        'id': row.id
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            this.tableData.splice(index, 1)
                            this.$message({
                                type: 'success',
                                message: '删除成功！',
                                offset: 60
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败！',
                                offset: 60
                            })
                        }
                    }).catch()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除！',
                        offset: 60
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>